<template>
  <div class="headerbox">
    <!--    <el-carousel trigger="click" height="200px">-->
    <!--      <el-carousel-item v-for="item in List" :key="item">-->
    <!--        <h3 class="small">-->
    <!--          <router-link :to="item.nId?{name:'newsDetail',query:{nId:item.nId,nClass:item.nClass}}:{path:$route.fullPath}"><img :src="item.nPic" style="height: 200px"></router-link>-->
    <!--        </h3>-->
    <!--      </el-carousel-item>-->
    <!--      <div class="block" >-->
    <el-image :src="src" :fit="fit" style="">
      <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
    </el-image>
    <!--      </div>-->
    <!--    </el-carousel>-->
  </div>
</template>

<script>
export default {
  name: 'HeaderComponent',
  data() {
    return {
      src: 'https://s1.ax1x.com/2023/07/06/pC6UGX8.jpg',
      List: [{ nPic: "" }]
    }
  },
  methods: {
    // getAll() {
    //   this.$axios.get("/news/picList").then((res) => {
    //     if (res.data.data.length == 0) {
    //       this.List[0].nPic = "https://tse1-mm.cn.bing.net/th/id/OIP-C.TqaaGAe_aQdZZxTwHNGcxgHaGs?pid=ImgDet&rs=1";
    //     } else {
    //       this.List = res.data.data;
    //       let url = this.$axios.defaults.baseURL;
    //       for (let i = 0; i < this.List.length; i++) {
    //         this.List[i].nPic = url + "/file/img/" + this.List[i].nPic
    //       }
    //     }
    //   });
    // }
  },
  mounted() {
    // this.getAll();
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.headerbox {
  width: 1100px;
  height: 304px;
  background-color: white;
}
</style>
